<template>
  <div>
    <div class="group-head">
      <img src="https://img.wowdsgn.com/product-group/images/42313fbc-2be1-4776-b65c-db3bddf095a4_2dimension_750x500.jpg?imageslim" alt="">
    </div>
    <div class="group-goods">
      <div class="single-group" :key="item.productId" v-for="item in groupGoods" @click="handleDetail(item.productId,item)">
        <img :src="item.productImg" alt="">
        <p class="group-title">{{ item.productTitle }}</p>
        <div class="group-price">
          <span>￥{{ item.sellPrice }}</span>
          <span>￥{{ item.originalPrice }}</span>
        </div>
      </div>
    </div>
    <div class="no-much">
      没有更多了
    </div>
  </div>
</template>

<script>
import axios from 'axios'
import { mapMutations } from 'vuex'
export default {
  data () {
    return {
      groupGoods: []
    }
  },
  methods: {
    ...mapMutations('tabbar', ['show', 'hide']),
    handleDetail (goodsId, goods) {
      localStorage.setItem('goods', JSON.stringify(goods))
      this.$router.push(`/detail/${goodsId}`)
    }
  },
  mounted () {
    this.hide()
    axios.get(`/pages/productGroup/${this.$route.params.groupId}/products?currentPage=1&_=1583583712689`).then(res => {
      this.groupGoods = res.data.data
    })
  },
  destroyed () {
    this.show()
  }
}
</script>

<style lang="scss" scoped>
img{
  width: 100%;
}
.group-goods{
  display: flex;
  flex-wrap: wrap;
  .single-group:nth-child(2n-1){
    border-right: 1px solid #f0f0f0;
  }
  .single-group{
    width: 50%;
    box-sizing: border-box;
    border-bottom: 1px solid #f0f0f0;
    padding: 15px 15px 25px;
    .group-title{
      font-size: 14px;
      color: gray;
      width: 100%;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .group-price{
      span:nth-child(1){
        font-size: 14px;
      }
      span:nth-child(2){
        font-size: 12px;
        text-decoration: line-through;
        color: #ccc;
        margin-left: 5px;
      }
    }
  }
}
.no-much{
  font-size: 12px;
  padding: 15px;
  border-bottom: 1px solid #f0f0f0;
  margin-bottom: 70px;
  text-align: center;
}
</style>
